<template>
	<el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top"
		v-loading="isLoading">
		<el-row :gutter="30">
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.unityName' prop='unityName'>
					<el-input v-model.trim='formInline.unityName' clearable :placeholder='prompt?.unityName' disabled />
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.contactName' prop='contactName'>
					<el-input v-model.trim='formInline.contactName' clearable :placeholder='prompt?.contactName'
						disabled />
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.contactPhone' prop='contactPhone'>
					<el-input v-model.trim='formInline.contactPhone' clearable :placeholder='prompt?.contactPhone'
						disabled />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='24'>
				<el-form-item :label='titles?.status' prop='status'>
					<el-radio-group v-model='formInline.status'>
						<el-radio v-for="item in REGISTER_STATUS" :key="item.value" :value="item.value">
							{{ isNullOrEmpty( item.label ) }}
						</el-radio>
					</el-radio-group>
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='24' v-if="formInline.status == 2">
				<el-form-item :label='titles?.roleIds' prop='roleIds'>
					<unitRoleSelect v-model="formInline.roleIds" :placeholder="prompt?.roleIds" multiple
						:style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'unityRole')" />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='24' v-if="formInline.status == 2">
				<el-form-item :label='titles?.superAccount' prop='superAccount'>
					<el-input v-model.trim='formInline.superAccount' clearable :placeholder='prompt?.superAccount'
						:formatter="(value) => value.replace(ACCOUNT_REG.inputFormat, '')"
						:parser="(value) => value.replace(ACCOUNT_REG.inputFormat, '')" />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='24' v-if="formInline.status == 2">
				<el-form-item :label='titles?.password' prop='password'>
					<el-input v-model.trim='formInline.password' clearable type="password" show-password
						:placeholder='prompt?.password' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='24'>
				<el-form-item :label='titles?.isSend' prop='isSend' v-if="formInline.status == 2">
					<el-radio-group v-model='formInline.isSend'>
						<el-radio v-for="item in REGISTER_SEND_SMS" :key="item.value" :value="item.value">
							{{ isNullOrEmpty( item.label ) }}
						</el-radio>
					</el-radio-group>
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.remark' prop='remark'>
					<el-input v-model='formInline.remark' :autosize="{ minRows: 4 }" type="textarea" clearable
						:placeholder='prompt?.remark' />
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import type { infoType } from '@/api/manage/units-manager/new-registered-unit/index';
import { REGISTER_STATUS, REGISTER_SEND_SMS } from '@/constant/unit-settings'
import unitRoleSelect from '@/components/select/unitRoleSelect/unitRoleSelect.vue'
import { formValidateField } from '@/utils/functions'
import { PASSWORD_REG, ACCOUNT_REG } from '@/constant/index'
type FormProps = {
	formInline: infoType,
	isLoading: boolean
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false
});

const formRules = reactive(<FormRules>{
	unityName: [{ required: true, message: prompt?.unityName, trigger: 'blur' },],
	contactName: [{ required: true, message: prompt?.contactName, trigger: 'blur' },],
	contactPhone: [{ required: true, message: prompt?.contactPhone, trigger: 'blur' },],
	status: [{ required: true, message: prompt?.status, trigger: 'blur' },],
	isSend: [{ required: true, message: prompt?.isSend, trigger: 'blur' },],
	roleIds: [{ required: true, message: prompt?.roleIds, trigger: 'blur' },],
	superAccount: [
		{ required: true, message: prompt?.superAccount, trigger: 'blur' },
		{ pattern: ACCOUNT_REG.role, message: ACCOUNT_REG.text, trigger: 'blur' }
	],
	password: [
		{ required: true, message: prompt?.password, trigger: 'blur' },
		{ pattern: PASSWORD_REG.role, message: PASSWORD_REG.text, trigger: 'blur' }
	],

});
const ruleFormRef = ref();

function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
